<template>
    <section class="own-menu">
        <el-menu
            ref="leftMenue"
            :default-active="defaultActive"
            class="el-menu-vertical"
            unique-opened
            router
            background-color="#303642"
            text-color="#fff"
        >
            <el-submenu v-for="(item, index) in appMenuList" :key="item.id" :index="String(index)">
                <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>{{ item.title }}</span>
                </template>
                <el-menu-item
                    v-for="value in item.children"
                    :key="value.id"
                    :index="value.path"
                >{{ value.name }}</el-menu-item>
            </el-submenu>
        </el-menu>
    </section>
</template>
<script>
import {Menu, Submenu, MenuItemGroup, MenuItem} from 'element-ui';
export default {
    name: 'own-menu',
    data() {
        return {
            defaultActive: '',
            appMenuList: [
                {
                    title: '核心功能',
                    children: [
                        {
                            name: '我的任务',
                            path: '/hello/tasks'
                        },
                        {
                            name: '趋势图',
                            path: '/hello/trend'
                        },
                        {
                            name: '打回',
                            path: '/hello/back'
                        }
                    ]
                }
            ]
        };
    },
    components: {
        elMenu: Menu,
        elSubmenu: Submenu,
        elMenuItemGroup: MenuItemGroup,
        elMenuItem: MenuItem
    },
    watch: {
        '$route': 'changeRoute'
    },
    created() {
        this.defaultActive = this.$route.path;
    },
    methods: {
        changeRoute(to, from, next) {
            this.$refs.leftMenue.activeIndex = to.path;
        }
    }
};
</script>

<style lang="postcss">
.own-menu {
    height: 100%;
    width: 100%;
    .el-menu-vertical {
        border-right: 0 none;
        background: #353e42;
        height: 100%;
    }
    .el-submenu__title {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .el-menu-item {
        padding-left: 50px !important;
        text-align: left;
    }
    .el-menu-item.is-active {
        color: #409EFF;
        background: rgb(38, 43, 53)!important;
    }
}
</style>
